<template>
  <div class="home">
    <div class="list">
      <div
        v-for="item in tabelList"
        :key="item.id"
        class="p-2 flex border-dashed border-b-2 border-gray-100"
        @click="onCLickDetail(item)"
      >
        <span class="flex-1 text-base"
          >{{ item.course_title }}
          <span class="text-gray-700 text-sm"
            >（目录：{{ item.section_title }}）</span
          >
        </span>
        <span class="text-gray-700 text-xs"
          >观看于：{{ item.create_time }}</span
        >
        <span class="text-gray-700 text-xs ml-1"
          >时长：{{ item.duration }}s</span
        >
      </div>
    </div>
  </div>
</template>

<script>
import { getQuestionnaireRecordList } from "api/questionnaire";
import { getCourseHistoryList } from "api/course";
export default {
  name: "Home",
  data() {
    return {
      tabelList: [],
      paginationConfig: {
        direction: "center", // 分页位置
        layout: "total, sizes, prev, pager, next, jumper", // 分页类型
        pageSizes: [10, 20], // 分页pages
        total: 0,
        page: 1, // 页数-默认1
        pageSize: 12, // 每页条数-默认10
      },
    };
  },
  computed: {},
  created() {
    this.getList();
  },
  methods: {
    findMatchingScope(scope, total) {
      if (!scope || scope.length === 0) {
        return null;
      }
      const matchingScope = scope.find(
        (v) => Number(v.min) <= total && total <= Number(v.max)
      );
      return matchingScope || null;
    },
    async getList() {
      getCourseHistoryList({
        // questionnaireId: this.$route.query.id
      })
        .then((res) => {
          if (res.code === 200) {
            this.tabelList = res.data;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    onCLickDetail(item) {
      this.$router.push({
        path: "/course/detail",
        query: {
          id: item.course_id,
        },
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.home {
  background-color: #f7f7f7;
  min-height: 90vh;
}
.list {
  width: 694px;
  margin: 0 auto;
  background-color: #fff;
  padding: 20px;
}
</style>
